<template>
  <div class="error-container">
    <div
      class="error-image-box"
      :style="{
        width,
        transform: `translate(${translateX},${translateY})`,
      }"
    >
      <img
        v-if="errImg"
        class="error-image"
        :src="
          getAssetsFile(
            `image/error/${
              errorType == 'noData' ? 'yh_error_no_data.png' : 'yh_error.png'
            }`
          )
        "
        alt=""
      />
    </div>
    <template v-if="errMsg">
      <div class="error-msg" v-if="errorType == 'requestBad'">
        <slot>服务开小差啦！</slot>
      </div>
      <div class="error-msg" v-else-if="errorType == 'noData'">
        <slot>暂无数据</slot>
      </div>
      <div class="error-msg" v-else-if="errorType == 'loading'">
        <slot>加载中,请稍后...</slot>
      </div>
    </template>
    <div class="reload-control" v-if="errorType == 'requestBad'">
      <a-button type="primary" shape="round" ghost @click="handleReload"
        >刷新重试</a-button
      >
    </div>
  </div>
</template>

<script setup name="errorContainer">
import { useRouter } from "vue-router";
import { getAssetsFile } from "/@/utils/tool";
const props = defineProps({
  errImg: {
    default: true,
    type: Boolean,
  },
  width: {
    default: "200px",
    type: String,
  },
  errorType: {
    default: "noData", // loading 加载中  requestBad 请求失败  noData 空数据
    type: String,
  },
  errMsg: {
    default: true,
    type: Boolean,
  },
  translateY: {
    default: "10px",
    type: String,
  },
  translateX: {
    default: "-10px",
    type: String,
  },
});
const router = useRouter();
//methods
const handleReload = () => {
  router.go();
};
</script>

<style lang="scss" scoped>
.error-container {
  user-select: none;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .error-image-box {
    transform: translate(-10px, 10px);
    .error-image {
      display: block;
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }
  .error-msg {
    margin-top: 10px;
    color: #a3a3a3;
  }
  .reload-control {
    margin-top: 15px;
  }
}
</style>
